
<!-- 列表界面 -->
<div id="data-list">
	<div class="banner hidetree">
		<span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao" data-title='菜单列表'>菜单列表查询</span>
	</div>
	<div class="base-form"> 
		<form id="fa-search">
			<table class="base-table form search">
				<tr>
					<td class="td-bg" width="150">菜单名称</td>
					<td class="left padding-l">
						<input	class="base-input" id="name">
					</td>
					<td class="td-bg" width="150">上级菜单名称</td>
					<td class="left padding-l">
						<input	class="base-input pName" id="pName" readonly="readonly">
                        <ul class="ztree ztree-position"></ul>
					</td>
					<td class="center" rowspan="1" width="150">
						<button id="btn_search" type="button" class="base-btn base-bg-green" data-toggle="modal">查询</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="banner hidetree">
		<span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao">菜单列表</span>
		<shiro:hasPermission name="sysMenu:saveMenu">
		<div id="toolbar" class="toolbar">
			<button id="btn_add" type="button" class="base-btn base-bg-blue" data-toggle="modal">新增</button>
			<button id="btn_deleteAll" type="button" class="base-btn base-bg-red" data-toggle="modal">全部删除</button>
		</div>
		</shiro:hasPermission>
	</div>
	<div id="list">
	<table class="list-table base-table">
		<thead>
			<tr>
				<th width="50"><label><input type="checkbox" id="selectAll"></label></th>
				<th width="60">序号</th>
				<th width="150">菜单名称</th>
				<th width="110">上级菜单名称</th>
				<th>URL地址</th>
				<th width="60">资源类型</th>
				<th width="150">权限字符串</th>
				<th width="60">状态</th>
				<th width="50">描述</th>
				<th width="100">操作</th>
			</tr>
		</thead>
		<tbody id="datalist">
			
		</tbody>
		<script id="tradecent-template" type="text/x-handlebars-template">
	{{#each this}}
	<tr>
		<td><input type="checkbox" value={{menuId}} name="ids"></td>
		<td><div class='base-wrap'>{{addOne @index}}</div></td>
		<td><div class='base-wrap left'>{{name}}</div></td>
		<td><div class='base-wrap left'>{{isNull parentMenu.name}}</div></td>
		<td><div class='base-wrap left'>{{isNull url}}</div></td>
		<td><div class='base-wrap'>{{getType type}}</div></td>
		<td><div class='base-wrap left'>{{permission}}</div></td>
		<td><div class='base-wrap'>{{isNot status}}</div></td>
		<td><div class='base-wrap'>{{remark}}</div></td>
		<td>
		<shiro:hasPermission name="sysMenu:updateMenu"><span class="oper-handle iconfont icon-bianji base-yellow update" title='修改菜单' data-pkid={{menuId}}></span></shiro:hasPermission>
		<shiro:hasPermission name="sysMenu:deleteMenu"><span class="oper-handle iconfont icon-shanchu base-red delete" title='删除菜单' data-pkid={{menuId}}></span></shiro:hasPermission>
		<shiro:hasPermission name="sysMenu:detailMenu"><span class="oper-handle iconfont icon-xiangqing base-blue detail" title='详情菜单' data-pkid={{menuId}}></span></shiro:hasPermission>
		</td>
	</tr>
	{{/each}}		
	</script>
	</table>
	</div>
</div>
<!-- end列表界面 -->

<!-- 新增与详情页面 -->
<div id="data-form"  data-title='新增菜单'>
	<form id="form">
		<table class="base-table form">
			<input type='hidden' name='menuId'>
			<tr>
				<td class="td-bg" width="150">上级菜单</td>
				<td class="left">
					<input class="base-input pName" name='parentMenuPname' data-id="name">
					<ul class="ztree ztree-position"></ul>
					<input name='parentMenuPid' class="pMenuId" type="hidden"  data-id="menuId">
				</td>
				<td class="td-bg hidetree" width="150">菜单名称</td>
				<td class="left"><input name="name"
					class="base-input validate require hidetree" data-exp="w{2-20}"></td>
			</tr>
			<tr>
				<td class="td-bg" width="150">URL地址</td>
				<td class="left"><input name="url"
					class="base-input validate" data-exp="w{1-50}"></td>
				<td width="150" class="hidetree">状态</td>
				<td>
					<select class="base-select validate require"  name="status">
						<option value="">请选择</option>
						<option value="0">可用</option>
						<option value="1">不可用</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="td-bg" width="150">权限字符串</td>
				<td class="left"><input name="permission"
					class="base-input validate" data-exp="w{1-50}"></td>
				<td width="150" class="hidetree" >资源类型</td>
				<td>
					<select class="base-select validate require"  name="type">
						<option value="">请选择</option>
						<option value="1">菜单</option>
						<option value="0">按钮</option>
						<option value="2">系统</option>
					</select>
				</td>
			</tr>
			<tr>
				<td width="150">一级菜单图标</td>
				<td>
					<input name="icon" class="base-input validate" data-exp="w{1-50}">
				</td>
				<td width="150" class="hidetree">是否嵌入页面</td>
				<td>
					<select class="base-select validate require"  name="isIframe">
						<option value="">请选择</option>
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</td>
			</tr>
			<tr>
				<td width="150" class="hidetree">是否打开一个新页面</td>
				<td>
					<select class="base-select"  name="isOpen">
						<option value="">请选择</option>
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</td>
				<td width="150" class="hidetree">是否是主页</td>
				<td>
					<select class="base-select"  name="isMain">
						<option value="">请选择</option>
						<option value="0">否</option>
						<option value="1">是</option>
					</select>
				</td>
			</tr>
			<tr>
				<td width="150">描述</td>
				<td colspan="3">
					<textarea class="base-textarea" name="remark"></textarea> 
				</td>
			</tr>
		</table>
	</form>
	<div id="toolbar" class="toolbar buttom-btn fixed_pos">
			<button id="btn_back" type="button" class="base-btn base-bg-yellow">
				返回</button>
			<button id="btn_save" type="button" class="base-btn base-bg-blue">
				保存</button>
		</div>
</div>
<!--end新增与详情页面-->
<script type="text/javascript">
	$(function() {
		$.baseEvent({
			ctx:'',
			param:['name','pName'],
			isPage:true,
			pageList_url:"/sysMenu/pageList",
			form_url:'/sysMenu/saveMenu',
			data_list:'/route/sys/sys_menuList',
			del_url:'/sysMenu/delMenu',
			findBy_url:'/sysMenu/findMenu',
            del_all_url:'/sysMenu/delAllMenu',
			add_is_dialog:true
		});

        $('.ztree').getNiceScrolls({selected:[{".ztree":400}]})

		//getDept();//上级菜单
		$(".pName").on('click',function(){
			var $_this = $(this),
			$ztree = $_this.next();
			$ztree.show();
			$.fn.zTree.init($ztree, setting);
			
		});
			
	     //隐藏tree
	   $('.hidetree').click(function(){
			$(".pName").next().hide();
		}); 
	});
	
	function getDept() {
		var my = {
				url : "/sysMenu/findTopList",
            	type:'get',
				callback : function(res) {
					for (var i = 0; i < res.data.length; i++) {
						$("#pId").append(
								"<option value='"+res.data[i].menuId+"'>"
								      + res.data[i].name + "</option>");
					}
				}
		}
		$._NormalRequest(my);
	}
	
	/**************************ztree************************************/
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "menuId",
                pIdKey: "pid",
                rootPId: ""
            },
            key: {
                title: "name",
                name: "name"
            },
        },
        async: { //ztree异步请求数据 
            enable: true,
            dataFilter: ajaxDataFilter, //预处理数据
            autoParam: ["id"],//提交参数
            url: "/sysMenu/findAll", //请求action方法
            type: 'get',
            autoparam: ["data"]
        },
        callback: {
            beforeClick: beforeClick
        }
    };
    /* 获取返回的数据，进行预操作 */
    function ajaxDataFilter(treeId, parentNode, responseData) {
        responseData = responseData.data;
        return responseData;
    };
    //异步加载完成时运行，此方法将所有的节点打开
    function zTreeOnAsyncSuccess(event, treeId, msg) {
        //var treeObj = $.fn.zTree.getZTreeObj("tree");
        var treeObj = $.fn.zTree.getZTreeObj($(".ztree"));
        treeObj.expandAll(true);
        treeObj.checkNode(treeId, !treeId.checked, null, true);
        //详情界面
        var my = {
            url: "/sysRole/findAuthority",
            type:'get',
            para: {
                "roleId": $("input[name='roleId']").val()
            },
            callback: function(res) {
                res.data.memus.map(function(v, i) {
                    var node = treeObj.getNodeByParam("menuId", v.menuId);
                    treeObj.checkNode(node, true, true);
                    treeObj.updateNode(node);
                })
            }
        }
        $._NormalRequest(my);
    }

    function beforeClick(treeId, treeNode) {
    	var pMenuId = $(".pMenuId");
    	pMenuId.val(treeNode.menuId);
    	$(".pName").val(treeNode.name);
    	//$("#"+treeId).hide();
    	$(".ztree").hide();
    	var menuId = $("input[name='menuId']").val();
    	if(pMenuId.val() && pMenuId.val()==menuId){
    		pMenuId.val("");
    		$(".pName").val("");
			layer.tips('上级菜单和本级菜单不能一样,请重新选择上级菜单', "input[name='parentMenuPname']");
		}
        //var zTree = $.fn.zTree.getZTreeObj("tree");
        var zTree = $.fn.zTree.getZTreeObj($(".ztree"));
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    /*******************************************************************/
</script>
